
<template>

      <div class="analysis" ref="analysis" style="width: 100%; height: 260px"></div>

</template>

<style scoped lang="scss">

</style>

<script>
import * as echarts from 'echarts'
let chart = null

export default {
props:['perData'],
  name:'sexRatio',
  data(){
    return{

    }
  },
  watch: {
    perData: {
      handler(newData) {
        // Update ECharts instance with new data
        this.setOptions(newData)
      },
      deep: true // Watch nested changes in the prop
    }
  },
  mounted() {
    chart = echarts.init(this.$refs.analysis)
    // this.setOptions()
  },
  methods:{
    setOptions(data) {
     const seriesData = [{
        name: "清醒",
        value: data.awakeTime
      }, {
        name: "REM",
        value: data.remTime
      }, {
        name: "浅眠",
        value:data.lightTime

     }, {
        name: "深眠",
        value: data.deepTime
      }, ]
      let colorArr = ['#00DAA6', '#F9BD55', '#409EFF', '#5F6CF8']

     let option = {

        tooltip: {
            trigger: 'item',
            // borderColor: 'rgba(255,255,255,.3)',
            // backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            padding: 5,
            formatter: function(parms) {
              console.log(parms)
                var str = "睡眠："+parms.data.name + "</br>" +
                      "时间：" + parms.data.value + "分钟</br>" +
                    "占比：" + parms.percent + "%";
                return str;
            }
        },

        series: [{
          type: 'pie',
          center: ['42%', '50%'],
          radius: ['40%', '60%'],
          selectedMode: 'single',
          selectedOffset: 10,
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function(params) {
                return colorArr[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              formatter: function(params) {
                return '{a|' + params.name +'}\n{b|' + params.value+'}{c|'+'分钟'+'}' //引导线上面文字
              },
              distanceToLabelLine: 0,
              padding: [0, 0, 0, 0],
              rich: {

                a: {
                   color:'auto',
                   padding: [30, 25, -30, 10]
                },
                b: {
                  fontSize: 12,
                  padding: [20, 0, 40, 10],
                  height: -20
                },
                c: {
                  fontSize: 12,
                  padding: [20,10, 40, 2],
                  height: -20
                },
              }
            }

          },
          labelLine: {
            show: true,
            normal: {
              length: 20,
              length2: 20,
              lineStyle: {
                width: 2
              }
            }
          },
          data: seriesData
        }]
      };
      chart.setOption(option)
    },
  }
}
</script>
